<!--
 * @Author: 朱自强
 * @Date: 2024-03-08 08:53:11
 * @LastEditors: 朱自强
 * @LastEditTime: 2024-03-13 14:03:09
 * @FilePath: \A-LOT-OF-TEST-VUE3\src\App.vue
 * @Description: 
 * 
 * Copyright (c) 2024 by 朱自强, All Rights Reserved. 
-->
<script setup lang="ts">
import { RouterView } from 'vue-router'
import BaseMenu from '@/components/Layout/BaseMenu'
import BaseHeader from '@/components/Layout/BaseHeader'
import { useStyleStore } from '@/stores/style'
// 皮肤
const styleStore = useStyleStore()
</script>

<template>
  <!-- 主div -->
  <div class="app-main-div" :data-theme="styleStore.currTheme">
    <!-- 顶部栏 -->
    <div class="app-header-div">
      <BaseHeader />
    </div>
    <!-- 内容 -->
    <div class="app-contain-div">
      <!-- 左侧菜单 -->
      <div class="app-menu-div">
        <BaseMenu />
      </div>
      <!-- 右侧内容 -->
      <div class="app-right-content-div">
        <RouterView />
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
// 主div
.app-main-div {
  // border: solid black 1px;
  height: calc(100%);
  display: flex;
  flex-direction: column;
  color: var(--qc-normal-font-color);
  // 顶部栏
  .app-header-div {
    // border: solid #eee 1px;
  }
  // 内容
  .app-contain-div {
    // border: solid black 1px;
    flex: 1;
    height: 0;
    flex-flow: column;
    overflow-y: auto;
    display: flex;
    flex-direction: row;
    // 左侧菜单
    .app-menu-div {
      // border: solid red 1px;
      width: 220px;
    }
    // 右侧内容
    .app-right-content-div {
      // border: solid blue 1px;
      flex: 1;
      height: calc(~'100vh - 68px');
      overflow-y: auto;
      padding: var(--qc-padding-20);
    }
  }
}
</style>
